<template>
    <div class="star-info">
        <div class="left">
            <div class="img-box">
                <img :src="info.picUrl">
            </div>
        </div>
        <div class="right">
            <div class="star">
                <img src="@/assets/home/star.png">
                <span>服务明星</span>
                <img src="@/assets/home/star.png">
            </div>
            <p>窗口：{{info.window}}</p>
            <div class="line"></div>
            <p>工号：{{info.id}}</p>
            <div class="line"></div>
            <p>姓名：{{info.name}}</p>
        </div>
    </div>
</template>

<script>
export default {
    name: "starInfo",
    props: {
        info: {
            type: Object,
            default: () => ({
                window: "发改",
                code: "A123",
                name: "张小军"
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.star-info{
    display: flex;
    .left{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .img-box{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 78px;
        height: 92px;
        background: url("~@/assets/home/kuang.png") no-repeat;
        background-size: 100% 100%;
        img{
            width: 69px;
            height: 81px;
            background: #f00;
        }
    }
    .right{
        margin-left: 10px;
        .star{
            display: flex;
            align-items: center;
            width: 116px;
            height: 25px;
            padding: 0 2px 0 6px;
            margin-bottom: 4px;
            background: linear-gradient(90deg, rgba(102, 146, 255, 0.34) 0%, rgba(61, 88, 153, 0) 100%);
            img{
                width: 12px;
                height: 12px;
            }
            span{
                color: rgba(252, 207, 10, 1);
                font-family: "Source Han Sans CN";
                font-weight: 500;
                font-size: 14px;
                line-height: 20px;
            }
        }

        p {
            width: 116px;
            color: rgba(156, 180, 210, 1);
            font-weight: 400;
            font-size: 14px;
            line-height: 19px;
        }

        .line{
            width: 116px;
            height: 1px;
            margin: 4px 0;
            background: rgba(101, 135, 199, 0.5);
        }
    }
}
</style>